import React, { useEffect, useState } from 'react'
import { Space, Table, Tag, Pagination, Button, Modal } from 'antd';
import {
    DeleteOutlined,
    EditOutlined,
    SearchOutlined
} from '@ant-design/icons';
import axios from 'axios'



export default function Jurisdiction_list() {
    const { confirm } = Modal
    const [dataSource, setdataSource] = useState([])
    useEffect(() => {
        let url = 'http://localhost:2002/rights?_embed=children';
        axios.get(url).then(res => {
            res.data[0].children = ''
            setdataSource(res.data)
        })
    }, [])
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id'
        },
        {
            title: '权限名称',
            dataIndex: 'title'
        },
        {
            title: '权限路径',
            dataIndex: 'key',
            render: (key: any) => <Tag color='orange'>{key}</Tag>
        },
        {
            title: '操作',
            render: (key: any) => <>
                <Button danger shape="circle" icon={<DeleteOutlined />} 
                onClick={() => delMethod(key) } />
                <Button type="primary" shape="circle" icon={<EditOutlined />} />
            </>
        },
    ]
    const delMethod = (key:any) => {
        confirm({
            title:'确定要删除嘛？',
            onOk() {
               let url = `http://localhost:2002/rights/${key.id}`
               dataSource.splice(key,1) && axios.delete(url)
               setdataSource([...dataSource])
            }
        },)
    }
    return <>
        <Table columns={columns} dataSource={dataSource}
            pagination={{ pageSize: 5 }} />
    </>

}
